<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>Rasende Roboter</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

		<script src="/socket.io/socket.io.js"></script>
		<script src="js/login.js"></script>
	    <link rel="stylesheet" href="css/style.css"/>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/qrcode.js"></script>
		
	</head>
	<body onload="init()"> 
	<br/><br/><br/><br/>
		<header align="center">
			<h1>Bienvenue sur Rasende Roboter</h1>
			<img src="images/robot.png" align="center"/>
			<br/><br/>
			<a class="lien" href="http://fr.wikipedia.org/wiki/Ricochet_Robots"> Comment Jouer? </a>
		</header>
		<br/><br/>
		
		<section>
			<nav>
				<form method="post" action="" id="nouvellePartie" align="center">
				<table class="tableau" align="center">
				<tr>
					<td ><label for="idGame">Entrez un nom pour la nouvelle partie : </label></td><td><input type="text" name="idGame" id="idGame"/><br/></td>
				</tr>
				<tr>
				<td><label for="login">Entrez votre nom : </label></td><td><input type="text" name="login" id="login"/><br/></td>
				</tr>
				</table>
			
					<br/>
					<input type="submit" value="Nouveau jeu !" />
				</form>
			</nav>
			<section id="detailPartie">
			</section>
		</section>
		<br/><br/><br/>
		<section>
		<label style="margin-left:15%;"> Les parties en cours : </label>
		<nav>
			<table id="lesParties" style="margin-left:20%;">
			</table>
		</nav>
		<nav style="margin-left:60%; margin-top: -25px">
		<label for="text">Connectez-vous sur :  </label> <input id="text" type="text" value="http://192.168.1.133:8090/" style="width:auto"/><br />
		<nav id="qrcode" style="width:100px; height:100px; margin-top:15px; margin-left:27%"></nav>
		</nav>
		</section>
		<script type="text/javascript">
		var qrcode = new QRCode(document.getElementById("qrcode"), {
			width : 150,
			height : 150
		});

		function makeCode () {		
			var elText = document.getElementById("text");
			
			if (!elText.value) {
				alert("Input a text");
				elText.focus();
				return;
			}
			qrcode.makeCode(elText.value);
		}

		makeCode();

		$("#text").
			on("blur", function () {
				makeCode();
			}).
			on("keydown", function (e) {
				if (e.keyCode == 13) {
					makeCode();
				} 
			});
		</script>
	</body>
</html>

